<template>
  <div class="min-h-screen bg-gray-50 p-4 md:p-6 lg:p-8">
    <div class="max-w-4xl mx-auto">
      <a-card title="世界时钟" class="mb-4">
        <div class="space-y-6">
          <!-- 当前时间 -->
          <div class="text-center">
            <div class="text-4xl font-bold mb-2">{{ currentTime }}</div>
            <div class="text-gray-500">{{ currentDate }}</div>
          </div>

          <!-- 时区选择 -->
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">
                选择时区
              </label>
              <a-select
                v-model:value="selectedTimezone"
                style="width: 100%"
                show-search
                :options="timezoneOptions"
                @change="updateSelectedTime"
              />
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">
                选择城市
              </label>
              <a-select
                v-model:value="selectedCity"
                style="width: 100%"
                show-search
                :options="cityOptions"
                @change="updateSelectedTimezone"
              />
            </div>
          </div>

          <!-- 选定时区时间 -->
          <div v-if="selectedTimezone" class="text-center p-4 bg-gray-50 rounded-lg">
            <div class="text-3xl font-bold mb-2">{{ selectedTime }}</div>
            <div class="text-gray-500">{{ selectedDate }}</div>
            <div class="text-sm text-gray-400 mt-1">
              {{ getTimeDifference() }}
            </div>
          </div>

          <!-- 常用时区 -->
          <div>
            <h4 class="text-sm font-medium text-gray-700 mb-2">常用时区</h4>
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
              <div
                v-for="zone in commonTimezones"
                :key="zone.value"
                class="p-3 bg-white rounded-lg shadow-sm border hover:shadow-md transition-shadow cursor-pointer"
                @click="selectedTimezone = zone.value"
              >
                <div class="text-sm font-medium">{{ zone.label }}</div>
                <div class="text-lg">{{ getTimezoneTime(zone.value) }}</div>
              </div>
            </div>
          </div>
        </div>
      </a-card>

      <!-- 使用说明 -->
      <a-card title="使用说明" class="mb-4">
        <ol class="list-decimal list-inside space-y-2 text-gray-600">
          <li>可以通过时区或城市名查找目标时区</li>
          <li>显示本地时间与目标时区的时差</li>
          <li>点击常用时区卡片可快速切换</li>
          <li>支持实时更新</li>
        </ol>
      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'
import timezone from 'dayjs/plugin/timezone'

dayjs.extend(utc)
dayjs.extend(timezone)

// 状态
const currentTime = ref('')
const currentDate = ref('')
const selectedTimezone = ref('')
const selectedCity = ref('')
const selectedTime = ref('')
const selectedDate = ref('')

// 定时器
let timer: number | null = null

// 时区数据
const timezones = [
  { value: 'Asia/Shanghai', label: '中国标准时间 (UTC+8)' },
  { value: 'America/New_York', label: '纽约 (UTC-5/4)' },
  { value: 'Europe/London', label: '伦敦 (UTC+0/1)' },
  { value: 'Europe/Paris', label: '巴黎 (UTC+1/2)' },
  { value: 'Asia/Tokyo', label: '东京 (UTC+9)' },
  { value: 'Australia/Sydney', label: '悉尼 (UTC+10/11)' },
  { value: 'Pacific/Auckland', label: '奥克兰 (UTC+12/13)' },
  { value: 'Asia/Dubai', label: '迪拜 (UTC+4)' },
  { value: 'Asia/Singapore', label: '新加坡 (UTC+8)' },
  { value: 'America/Los_Angeles', label: '洛杉矶 (UTC-8/-7)' },
  { value: 'Asia/Seoul', label: '首尔 (UTC+9)' },
  { value: 'Europe/Moscow', label: '莫斯科 (UTC+3)' }
]

const timezoneOptions = timezones.map(tz => ({
  value: tz.value,
  label: tz.label
}))

const commonTimezones = timezones.slice(0, 8)

// 城市数据
const cities = [
  { value: 'Shanghai', label: '上海', timezone: 'Asia/Shanghai' },
  { value: 'Beijing', label: '北京', timezone: 'Asia/Shanghai' },
  { value: 'NewYork', label: '纽约', timezone: 'America/New_York' },
  { value: 'London', label: '伦敦', timezone: 'Europe/London' },
  { value: 'Paris', label: '巴黎', timezone: 'Europe/Paris' },
  { value: 'Tokyo', label: '东京', timezone: 'Asia/Tokyo' },
  { value: 'Sydney', label: '悉尼', timezone: 'Australia/Sydney' },
  { value: 'Singapore', label: '新加坡', timezone: 'Asia/Singapore' },
  { value: 'Dubai', label: '迪拜', timezone: 'Asia/Dubai' },
  { value: 'Moscow', label: '莫斯科', timezone: 'Europe/Moscow' }
]

const cityOptions = cities.map(city => ({
  value: city.value,
  label: city.label
}))

// 更新当前时间
const updateCurrentTime = () => {
  const now = dayjs()
  currentTime.value = now.format('HH:mm:ss')
  currentDate.value = now.format('YYYY年MM月DD日 dddd')
  if (selectedTimezone.value) {
    updateSelectedTime()
  }
}

// 更新选定时区时间
const updateSelectedTime = () => {
  if (!selectedTimezone.value) return

  const now = dayjs().tz(selectedTimezone.value)
  selectedTime.value = now.format('HH:mm:ss')
  selectedDate.value = now.format('YYYY年MM月DD日 dddd')

  // 更新对应的城市
  const city = cities.find(c => c.timezone === selectedTimezone.value)
  if (city && city.value !== selectedCity.value) {
    selectedCity.value = city.value
  }
}

// 更新选定城市的时区
const updateSelectedTimezone = () => {
  const city = cities.find(c => c.value === selectedCity.value)
  if (city && city.timezone !== selectedTimezone.value) {
    selectedTimezone.value = city.timezone
  }
}

// 获取指定时区的当前时间
const getTimezoneTime = (tz: string) => {
  return dayjs().tz(tz).format('HH:mm:ss')
}

// 计算时差
const getTimeDifference = () => {
  if (!selectedTimezone.value) return ''

  const local = dayjs()
  const target = dayjs().tz(selectedTimezone.value)
  const diffHours = target.utcOffset() - local.utcOffset()
  const hours = Math.abs(diffHours / 60)
  
  if (diffHours === 0) return '与本地时间相同'
  return `比本地时间${diffHours > 0 ? '快' : '慢'} ${hours} 小时`
}

// 生命周期
onMounted(() => {
  updateCurrentTime()
  timer = window.setInterval(updateCurrentTime, 1000)
  
  // 默认选择中国时区
  selectedTimezone.value = 'Asia/Shanghai'
  selectedCity.value = 'Shanghai'
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
    timer = null
  }
})
</script> 